<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮特效</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            background-color: #f1f1f1;
        }
        a{
            text-decoration: none;
            color: white;
            background-color: rgba(29,171,209,1);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 84px 42px;
            font-size: 20px;
            font-family: sans-serif;
            text-transform: uppercase;
            border-radius: 50%;
            animation: animate 2s linear infinite;
        }
        @keyframes animate {
            0%{
                box-shadow: 0 0 0 0 rgba(29,171,209,0.6), 0 0 0 0 rgba(29,171,209,0.6);
            }
            30%{
                box-shadow: 0 0 0 50px rgba(29,171,209,0), 0 0 0 0 rgba(29,171,209,0.6);
            }
            65%{
                box-shadow: 0 0 0 50px rgba(29,171,209,0), 0 0 0 30px rgba(29,171,209,0);
            }
            100%{
                box-shadow: 0 0 0 0 rgba(29,171,209,0), 0 0 0 30px rgba(29,171,209,0);
            }
        }
    </style>
</head>
<body>
    <a href="">GET START</a>
</body>
</html>